<template>
  <div class="echartsLine" ref="echartsLine"></div>
</template>

<script>
export default {
  mounted() {
    this.echartsLine();
  },
  methods: {
    echartsLine() {
      var myChart = this.$echarts.init(this.$refs["echartsLine"]);
      myChart.setOption({
        // legend: [
        //   {
        //     left: "left",
        //     // icon: "circle",
        //     data: ["总面积/千万平方米"],
        //     itemHeight: 9,
        //     textStyle:{
        //       color:'#cecee5',
        //       fontSize:'15'
        //     }
        //   },
        //   {
        //     right: "right",
        //     // icon: "circle",
        //     data: ["人均面积/平方米"],
        //     itemHeight: 9,
        //     textStyle:{
        //       color:'#cecee5',
        //       fontSize:'15'
        //     }
        //   }
        // ],
        legend: {
          show: true,
          x: 10,
          y: 0,
          textStyle: {
            color: "#cecee5",
            fontSize: "15"
          },
          itemGap: 30
        },
        grid: {
          top: "21%",
          bottom: "15%",
          left:'13%'
        },
        xAxis: {
          type: "category",
          data: ["2013", "2014", "2015", "2016", "2017", "2018", "2019"],
          boundaryGap: false,
          axisLine: {
            //坐标轴线设置
            lineStyle: {
              color: "rgba(200,200,200,.3)"
            }
          },
          axisTick: {
            show: false //坐标刻度
          },
          axisLabel: {
            color: "#ccc",
            fontSize: 12
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(100,100,100,.2)"
              // type: "line"
            }
          }
        },

        yAxis: [
          {
            axisLine: {
              show: false //坐标轴
            },
            axisTick: {
              show: false //坐标刻度
            },
            axisLabel: {
              show: false
            },
            type: "value",
            max: 12,
            min: 0,
            splitLine: {
              lineStyle: {
                color: "rgba(200,200,200,.1)"
                // type: "line"
              }
            }
          },
          {
            axisLine: {
              show: false //坐标轴
            },
            axisTick: {
              show: false //坐标刻度
            },
            axisLabel: {
              show: false
            },
            type: "value",
            max: 3,
            min: -1,
            splitLine: {
              show: false
            }
          },
          // 两侧假数据
          {
            type: "category",
            position: "left",
            offset: 10,
            data: ["", 2, 4, 6, 8, 10, 12],
            boundaryGap: false,
            axisLine: {
              show: false //坐标轴
            },
            axisTick: {
              show: false //坐标刻度
            },
            axisLabel: {
              color: "#ccc",
              fontSize: 15
            }
          },
          {
            type: "category",
            position: "right",
            offset: 10,
            data: [0, 1, 2],
            axisLine: {
              show: false //坐标轴
            },
            axisTick: {
              show: false //坐标刻度
            },
            axisLabel: {
              color: "#ccc",
              fontSize: 15
            }
          }
        ],
        series: [
          {
            name: "总面积",
            yAxisIndex: 0,
            data: [4.5, 5.6, 6.2, 6.5, 7.2, 8.2],
            type: "line",
            itemStyle: {
              color: "#108EE9"
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear", //设置线性渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(11,106,147)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(200,200,200,0)" // 100% 处的颜色
                    }
                  ],

                  globalCoord: false // 缺省为 false
                }
              }
            }
          },
          {
            name: "总面积",
            yAxisIndex: 0,
            data: ["", "", "", "", "", 8.2, 9.7],
            type: "line",
            itemStyle: {
              color: "#108EE9"
            },
            lineStyle: {
              type: "dashed"
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear", //设置线性渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(11,106,147)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(200,200,200,0)" // 100% 处的颜色
                    }
                  ],

                  globalCoord: false // 缺省为 false
                }
              }
            }
            
          },
          {
            name: "人均面积",
            yAxisIndex: 1,
            data: [0.8, 0.9, 0.7, 0.8, 0.84, 1.51],
            type: "line",
            itemStyle: {
              color: "#2FC25B"
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear", //设置线性渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "green" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(200,200,200,0)" // 100% 处的颜色
                    }
                  ],

                  globalCoord: false // 缺省为 false
                }
              }
            }
          },
          {
            name: "人均面积",
            yAxisIndex: 1,
            data: ["", "", "", "", "", 1.51, 1.98],
            type: "line",
            itemStyle: {
              color: "#2FC25B"
            },
            lineStyle: {
              type: "dashed"
            },
            areaStyle: {
              normal: {
                color: {
                  type: "linear", //设置线性渐变
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "green" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(200,200,200,0)" // 100% 处的颜色
                    }
                  ],

                  globalCoord: false // 缺省为 false
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
